<template>
	<view class="payment-complete">
		<view class="title u-text-center ">
            <u-icon name="checkmark-circle-fill"></u-icon>
            <text class="u-m-l-20">支付成功</text>
        </view>
        <view class="btns-box u-flex u-m-b-50">
            <u-button class="u-m-20" type="error" size="mini" @click="handleOrder">查看订单</u-button>
            <u-button class="u-m-20" type="error" size="mini" @click="handleHome">返回首页</u-button>
        </view>
        <!-- 为你推荐商品 -->
        <goods-recommend ref="goodsRecommend" title="为你推荐" :categoryId="491"></goods-recommend>
        <u-back-top :scroll-top="scrollTop" :customStyle="customStyle" :iconStyle="iconStyle" ></u-back-top>
	</view>
</template>

<script>
	export default {
        data() {
            return {
                scrollTop: 0,
                customStyle: {
                    background: '#B2B2B2'
                },
                iconStyle: {
                    color: '#FFFFFF',
                    fontSize: '36rpx'
                }
            }
        },
        //滚动距离
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        // 滚动到底部
        onReachBottom() {
            this.$refs.goodsRecommend.params.page_no += 1
            this.$refs.goodsRecommend.getGoodsList()
        },
        methods: {
            //查看订单
            handleOrder() {
                uni.navigateTo({
                    url: '/order-module/order/order-list'
                })
            },
            //返回首页
            handleHome() {
                uni.switchTab({
                    url: '/pages/tabs/home/home'
                })
            }
        }
	}
</script>

<style lang="scss">
    .payment-complete {
        background-color: #FFFFFF;
        height: 100%;
        .title {
            color: #67c23a;
            font-size: 42rpx;
            font-weight: 600;
            padding: 100rpx;
        }
        .btns-box {
            /deep/ .u-size-mini {
                font-size: 24rpx !important;
            }
            justify-content: center;
        }
    }
</style>
